import { useEffect, useState } from 'react'
import UserForm from './components/UserForm';
import UserList from './components/UserList';
import { addUser, getUserList, delUser } from './utils/db';
import './App.css'

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    onGetList();
  }, []);

  const onGetList = () => {
    getUserList().then(userList => {
      setUsers(userList);
    });
  }

  // 调用 IndexedDB 的 addUser 方法
  const onAddUser = (userName, sex, age) => {
    // 这里应该是异步调用 IndexedDB 的 addUser 方法
    console.log('添加用户:', userName, sex, age);
    addUser(userName, sex, age).then(() => {
      alert('添加成功');
      onGetList();
    }).catch(() => {
      alert("添加失败");
    });
  };

  // 调用 IndexedDB 的 deleteUser 方法
  const onDelUser = (id) => {
    // 这里应该是异步调用 IndexedDB 的 delUser 方法
    console.log('删除用户:', id);
    delUser(id).then(() => {
      alert('删除成功');
      onGetList();
    }).catch(() => {
      alert("删除失败");
    });
  };

  return (
    <div className='App'>
      <UserForm addUser={onAddUser} />
      <UserList users={users} deleteUser={onDelUser} />
    </div>
  )
}

export default App